<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站排行榜行榜样式</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
      color: #333;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      background-color: white;
      min-height: 100vh;
    }
    
    .header {
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      border-bottom: 1px solid #eee;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-btn {
      background: none;
      border: none;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 20px;
    }
    
    /* 排行榜切换 */
    .rank-tabs {
      display: flex;
      border-bottom: 1px solid #eee;
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    .rank-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .rank-tab {
      padding: 14px 16px;
      font-size: 16px;
      font-weight: 500;
      border: none;
      background: none;
      color: #666;
      position: relative;
      white-space: nowrap;
    }
    
    .rank-tab.active {
      color: #4263EB;
    }
    
    .rank-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 3px;
      background-color: #4263EB;
      border-radius: 3px 3px 0 0;
    }
    
    /* 排行榜内容 */
    .rank-content {
      padding: 16px;
    }
    
    .rank-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .rank-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .rank-period {
      font-size: 14px;
      color: #666;
    }
    
    /* 排行榜项基础样式 */
    .rank-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .rank-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .rank-item:last-child {
      border-bottom: none;
    }
    
    .rank-position {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 16px;
      margin-right: 12px;
      border-radius: 50%;
    }
    
    .rank-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
      border: 2px solid transparent;
    }
    
    .rank-info {
      flex: 1;
    }
    
    .rank-name {
      font-weight: 500;
      font-size: 16px;
      margin-bottom: 4px;
    }
    
    .rank-desc {
      font-size: 12px;
      color: #666;
    }
    
    .rank-score {
      font-weight: 600;
      font-size: 16px;
      color: #333;
      display: flex;
      align-items: center;
    }
    
    .rank-score i {
      margin-right: 4px;
      font-size: 14px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 各风格特定样式 */
    /* 1. 标准排行榜 */
    #style1 .rank-position.top-1 {
      background-color: #FFD700;
      color: #8B4513;
    }
    
    #style1 .rank-position.top-2 {
      background-color: #C0C0C0;
      color: #4A4A4A;
    }
    
    #style1 .rank-position.top-3 {
      background-color: #CD7F32;
      color: #fff;
    }
    
    #style1 .rank-position {
      background-color: #f5f5f5;
      color: #666;
    }
    
    /* 2. 内容创作者排行榜 */
    #style2 .rank-item {
      padding: 16px;
      background-color: #f9f9f9;
      border-radius: 12px;
      margin-bottom: 12px;
      border-bottom: none;
    }
    
    #style2 .rank-avatar {
      width: 56px;
      height: 56px;
    }
    
    #style2 .rank-metrics {
      display: flex;
      gap: 16px;
      margin-top: 4px;
      font-size: 12px;
      color: #666;
    }
    
    #style2 .rank-metric {
      display: flex;
      align-items: center;
    }
    
    #style2 .rank-metric i {
      margin-right: 4px;
      font-size: 12px;
    }
    
    #style2 .rank-score {
      flex-direction: column;
      align-items: flex-end;
    }
    
    #style2 .rank-rating {
      font-size: 12px;
      color: #666;
      margin-top: 2px;
    }
    
    /* 3. 话题热度榜 */
    #style3 .rank-item {
      flex-direction: column;
      align-items: flex-start;
      padding: 16px;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 12px;
      border-bottom: none;
    }
    
    #style3 .rank-header {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    
    #style3 .rank-position {
      margin-right: 8px;
    }
    
    #style3 .rank-tag {
      font-size: 14px;
      color: #4263EB;
      background-color: #f0f5ff;
      padding: 2px 8px;
      border-radius: 12px;
      margin-right: 8px;
    }
    
    #style3 .rank-title {
      font-size: 16px;
      margin-bottom: 8px;
    }
    
    #style3 .rank-stats {
      display: flex;
      gap: 16px;
      font-size: 12px;
      color: #666;
    }
    
    #style3 .rank-stat {
      display: flex;
      align-items: center;
    }
    
    #style3 .rank-stat i {
      margin-right: 4px;
    }
    
    /* 4. 游戏化排行榜 */
    #style4 {
      background-color: #f0f7ff;
    }
    
    #style4 .container {
      background-color: transparent;
    }
    
    #style4 .rank-content {
      padding-top: 24px;
    }
    
    #style4 .rank-podium {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 200px;
      margin-bottom: 32px;
      position: relative;
    }
    
    #style4 .podium-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 90px;
    }
    
    #style4 .podium-item.top-1 {
      height: 160px;
      background-color: #FFD700;
      border-radius: 8px 8px 0 0;
      margin: 0 8px;
    }
    
    #style4 .podium-item.top-2 {
      height: 120px;
      background-color: #C0C0C0;
      border-radius: 8px 8px 0 0;
      margin: 0 8px;
    }
    
    #style4 .podium-item.top-3 {
      height: 80px;
      background-color: #CD7F32;
      border-radius: 8px 8px 0 0;
      margin: 0 8px;
    }
    
    #style4 .podium-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 3px solid white;
      position: relative;
      top: -30px;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    #style4 .podium-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    #style4 .podium-name {
      font-weight: 600;
      margin-top: -16px;
      font-size: 14px;
    }
    
    #style4 .podium-score {
      font-size: 12px;
      color: #666;
      margin-top: 4px;
    }
    
    #style4 .rank-list {
      background-color: white;
      border-radius: 16px 16px 0 0;
      padding: 16px;
    }
    
    #style4 .rank-item {
      border-bottom: 1px solid #f5f5f5;
    }
    
    #style4 .rank-item.current-user {
      background-color: #f0f7ff;
      border-radius: 8px;
      padding: 12px;
      margin: 8px 0;
    }
    
    /* 5. 深色模式排行榜 */
    #style5 {
      background-color: #121212;
    }
    
    #style5 .container {
      background-color: #1e1e1e;
      color: white;
    }
    
    #style5 .header {
      border-bottom-color: #333;
    }
    
    #style5 .header-btn {
      color: #aaa;
    }
    
    #style5 .rank-tabs {
      border-bottom-color: #333;
    }
    
    #style5 .rank-tab {
      color: #aaa;
    }
    
    #style5 .rank-tab.active {
      color: #58a9ff;
    }
    
    #style5 .rank-tab.active::after {
      background-color: #58a9ff;
    }
    
    #style5 .rank-period {
      color: #aaa;
    }
    
    #style5 .rank-item {
      border-bottom-color: #333;
    }
    
    #style5 .rank-position.top-1 {
      background-color: #FFD700;
      color: #8B4513;
    }
    
    #style5 .rank-position.top-2 {
      background-color: #C0C0C0;
      color: #4A4A4A;
    }
    
    #style5 .rank-position.top-3 {
      background-color: #CD7F32;
      color: #fff;
    }
    
    #style5 .rank-position {
      background-color: #333;
      color: #aaa;
    }
    
    #style5 .rank-desc {
      color: #aaa;
    }
    
    #style5 .rank-score {
      color: white;
    }
    
    #style5 .style-switcher {
      background-color: #1e1e1e;
    }
    
    #style5 .style-btn {
      color: #ddd;
    }
    
    /* 6. 成就排行榜 */
    #style6 .rank-item {
      padding: 16px;
      border-radius: 12px;
      background-color: white;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 12px;
      border-bottom: none;
    }
    
    #style6 .rank-achievements {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    
    #style6 .achievement-badge {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background-color: #f0f5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #4263EB;
      font-size: 16px;
    }
    
    #style6 .rank-score {
      flex-direction: column;
      align-items: flex-end;
    }
    
    #style6 .rank-level {
      font-size: 12px;
      color: #666;
      background-color: #f5f5f5;
      padding: 2px 8px;
      border-radius: 12px;
      margin-top: 4px;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">标准排行</button>
    <button class="style-btn" data-style="style2">创作者榜</button>
    <button class="style-btn" data-style="style3">话题热榜</button>
    <button class="style-btn" data-style="style4">游戏化榜</button>
    <button class="style-btn" data-style="style5">深色模式</button>
    <button class="style-btn" data-style="style6">成就排行</button>
  </div>
  
  <!-- 1. 标准排行榜 -->
  <div id="style1" class="rank-style active">
    <div class="container">
      <div class="header">
        <button class="header-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">排行榜</h1>
        <button class="header-btn">
          <i class="fa fa-share-alt"></i>
        </button>
      </div>
      
      <div class="rank-tabs">
        <button class="rank-tab active">用户热度</button>
        <button class="rank-tab">内容精选</button>
        <button class="rank-tab">互动排行</button>
        <button class="rank-tab">新人推荐</button>
      </div>
      
      <div class="rank-content">
        <div class="rank-header">
          <h2 class="rank-title">本周排行榜</h2>
          <span class="rank-period">更新于 今天 08:00</span>
        </div>
        
        <ul class="rank-list">
          <li class="rank-item">
            <div class="rank-position top-1">1</div>
            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">张小明</div>
              <div class="rank-desc">旅行博主 · 发布 128 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 98.5k
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position top-2">2</div>
            <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">李华</div>
              <div class="rank-desc">美食达人 · 发布 96 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 87.3k
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position top-3">3</div>
            <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">王芳</div>
              <div class="rank-desc">摄影爱好者 · 发布 215 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 76.9k
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position">4</div>
            <img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">赵伟</div>
              <div class="rank-desc">科技博主 · 发布 87 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 65.2k
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position">5</div>
            <img src="https://picsum.photos/200/200?random=5" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">陈静</div>
              <div class="rank-desc">时尚博主 · 发布 156 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 59.7k
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- 2. 内容创作者排行榜 -->
  <div id="style2" class="rank-style">
    <div class="container">
      <div class="header">
        <button class="header-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">创作者榜</h1>
        <button class="header-btn">
          <i class="fa fa-filter"></i>
        </button>
      </div>
      
      <div class="rank-tabs">
        <button class="rank-tab active">综合排行</button>
        <button class="rank-tab">视频创作</button>
        <button class="rank-tab">图文创作</button>
        <button class="rank-tab">直播达人</button>
      </div>
      
      <div class="rank-content">
        <div class="rank-header">
          <h2 class="rank-title">月度创作者</h2>
          <span class="rank-period">2023年8月</span>
        </div>
        
        <ul class="rank-list">
          <li class="rank-item">
            <div class="rank-position top-1">1</div>
            <img src="https://picsum.photos/200/200?random=6" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">林达</div>
              <div class="rank-metrics">
                <div class="rank-metric"><i class="fa fa-play-circle-o"></i> 32 个视频</div>
                <div class="rank-metric"><i class="fa fa-eye"></i> 125.8万 观看</div>
                <div class="rank-metric"><i class="fa fa-comment-o"></i> 8.7万 评论</div>
              </div>
            </div>
            <div class="rank-score">
              98.6
              <div class="rank-rating">创作者指数</div>
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position top-2">2</div>
            <img src="https://picsum.photos/200/200?random=7" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">思远</div>
              <div class="rank-metrics">
                <div class="rank-metric"><i class="fa fa-play-circle-o"></i> 24 个视频</div>
                <div class="rank-metric"><i class="fa fa-eye"></i> 98.5万 观看</div>
                <div class="rank-metric"><i class="fa fa-comment-o"></i> 6.3万 评论</div>
              </div>
            </div>
            <div class="rank-score">
              92.3
              <div class="rank-rating">创作者指数</div>
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position top-3">3</div>
            <img src="https://picsum.photos/200/200?random=8" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">晓雯</div>
              <div class="rank-metrics">
                <div class="rank-metric"><i class="fa fa-play-circle-o"></i> 41 个视频</div>
                <div class="rank-metric"><i class="fa fa-eye"></i> 87.2万 观看</div>
                <div class="rank-metric"><i class="fa fa-comment-o"></i> 5.9万 评论</div>
              </div>
            </div>
            <div class="rank-score">
              89.7
              <div class="rank-rating">创作者指数</div>
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position">4</div>
            <img src="https://picsum.photos/200/200?random=9" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">子轩</div>
              <div class="rank-metrics">
                <div class="rank-metric"><i class="fa fa-play-circle-o"></i> 18 个视频</div>
                <div class="rank-metric"><i class="fa fa-eye"></i> 76.3万 观看</div>
                <div class="rank-metric"><i class="fa fa-comment-o"></i> 4.2万 评论</div>
              </div>
            </div>
            <div class="rank-score">
              85.1
              <div class="rank-rating">创作者指数</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- 3. 话题热度榜 -->
  <div id="style3" class="rank-style">
    <div class="container">
      <div class="header">
        <button class="header-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">话题热榜</h1>
        <button class="header-btn">
          <i class="fa fa-search"></i>
        </button>
      </div>
      
      <div class="rank-tabs">
        <button class="rank-tab active">全部话题</button>
        <button class="rank-tab">娱乐</button>
        <button class="rank-tab">科技</button>
        <button class="rank-tab">体育</button>
        <button class="rank-tab">美食</button>
      </div>
      
      <div class="rank-content">
        <div class="rank-header">
          <h2 class="rank-title">今日热榜</h2>
          <span class="rank-period">实时更新</span>
        </div>
        
        <ul class="rank-list">
          <li class="rank-item">
            <div class="rank-header">
              <div class="rank-position top-1">1</div>
              <span class="rank-tag">爆</span>
              <div class="rank-trend" style="color: #ff4d4f;"><i class="fa fa-arrow-up"></i> 128%</div>
            </div>
            <h3 class="rank-title">#年度电影颁奖典礼#</h3>
            <div class="rank-stats">
              <div class="rank-stat"><i class="fa fa-comment-o"></i> 28.5万 讨论</div>
              <div class="rank-stat"><i class="fa fa-eye"></i> 1256.3万 阅读</div>
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-header">
              <div class="rank-position top-2">2</div>
              <span class="rank-tag">热</span>
              <div class="rank-trend" style="color: #ff4d4f;"><i class="fa fa-arrow-up"></i> 96%</div>
            </div>
            <h3 class="rank-title">#新一代智能手机发布#</h3>
            <div class="rank-stats">
              <div class="rank-stat"><i class="fa fa-comment-o"></i> 19.8万 讨论</div>
              <div class="rank-stat"><i class="fa fa-eye"></i> 987.6万 阅读</div>
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-header">
              <div class="rank-position top-3">3</div>
              <span class="rank-tag">热</span>
              <div class="rank-trend" style="color: #ff4d4f;"><i class="fa fa-arrow-up"></i> 75%</div>
            </div>
            <h3 class="rank-title">#夏季旅行好去处推荐#</h3>
            <div class="rank-stats">
              <div class="rank-stat"><i class="fa fa-comment-o"></i> 15.2万 讨论</div>
              <div class="rank-stat"><i class="fa fa-eye"></i> 765.2万 阅读</div>
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-header">
              <div class="rank-position">4</div>
              <div class="rank-trend" style="color: #ff4d4f;"><i class="fa fa-arrow-up"></i> 42%</div>
            </div>
            <h3 class="rank-title">#健康饮食小知识#</h3>
            <div class="rank-stats">
              <div class="rank-stat"><i class="fa fa-comment-o"></i> 12.7万 讨论</div>
              <div class="rank-stat"><i class="fa fa-eye"></i> 654.8万 阅读</div>
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-header">
              <div class="rank-position">5</div>
              <div class="rank-trend" style="color: #52c41a;"><i class="fa fa-arrow-down"></i> 12%</div>
            </div>
            <h3 class="rank-title">#热门电视剧大结局#</h3>
            <div class="rank-stats">
              <div class="rank-stat"><i class="fa fa-comment-o"></i> 10.3万 讨论</div>
              <div class="rank-stat"><i class="fa fa-eye"></i> 587.4万 阅读</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- 4. 游戏化排行榜 -->
  <div id="style4" class="rank-style">
    <div class="container">
      <div class="header">
        <button class="header-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">社区达人榜</h1>
        <button class="header-btn">
          <i class="fa fa-trophy"></i>
        </button>
      </div>
      
      <div class="rank-content">
        <div class="rank-podium">
          <div class="podium-item top-2">
            <div class="podium-avatar">
              <img src="https://picsum.photos/200/200?random=10" alt="第二名">
            </div>
            <div class="podium-name">李华</div>
            <div class="podium-score">8750 积分</div>
          </div>
          
          <div class="podium-item top-1">
            <div class="podium-avatar">
              <img src="https://picsum.photos/200/200?random=11" alt="第一名">
            </div>
            <div class="podium-name">张小明</div>
            <div class="podium-score">9630 积分</div>
          </div>
          
          <div class="podium-item top-3">
            <div class="podium-avatar">
              <img src="https://picsum.photos/200/200?random=12" alt="第三名">
            </div>
            <div class="podium-name">王芳</div>
            <div class="podium-score">7580 积分</div>
          </div>
        </div>
        
        <ul class="rank-list">
          <li class="rank-item">
            <div class="rank-position">4</div>
            <img src="https://picsum.photos/200/200?random=13" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">赵伟</div>
              <div class="rank-desc">等级 24 · 连续签到 18 天</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-star"></i> 6920
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position">5</div>
            <img src="https://picsum.photos/200/200?random=14" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">陈静</div>
              <div class="rank-desc">等级 22 · 连续签到 7 天</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-star"></i> 6350
            </div>
          </li>
          
          <li class="rank-item current-user">
            <div class="rank-position">12</div>
            <img src="https://picsum.photos/200/200?random=15" alt="当前用户" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">我 <span style="color: #4263EB; font-size: 12px;">(你)</span></div>
              <div class="rank-desc">等级 18 · 连续签到 32 天</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-star"></i> 4890
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position">13</div>
            <img src="https://picsum.photos/200/200?random=16" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">林达</div>
              <div class="rank-desc">等级 17 · 连续签到 5 天</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-star"></i> 4750
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- 5. 深色模式排行榜 -->
  <div id="style5" class="rank-style">
    <div class="container">
      <div class="header">
        <button class="header-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">排行榜</h1>
        <button class="header-btn">
          <i class="fa fa-share-alt"></i>
        </button>
      </div>
      
      <div class="rank-tabs">
        <button class="rank-tab active">用户热度</button>
        <button class="rank-tab">内容精选</button>
        <button class="rank-tab">互动排行</button>
        <button class="rank-tab">新人推荐</button>
      </div>
      
      <div class="rank-content">
        <div class="rank-header">
          <h2 class="rank-title">本周排行榜</h2>
          <span class="rank-period">更新于 今天 08:00</span>
        </div>
        
        <ul class="rank-list">
          <li class="rank-item">
            <div class="rank-position top-1">1</div>
            <img src="https://picsum.photos/200/200?random=17" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">张小明</div>
              <div class="rank-desc">旅行博主 · 发布 128 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 98.5k
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position top-2">2</div>
            <img src="https://picsum.photos/200/200?random=18" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">李华</div>
              <div class="rank-desc">美食达人 · 发布 96 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 87.3k
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position top-3">3</div>
            <img src="https://picsum.photos/200/200?random=19" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">王芳</div>
              <div class="rank-desc">摄影爱好者 · 发布 215 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 76.9k
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position">4</div>
            <img src="https://picsum.photos/200/200?random=20" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">赵伟</div>
              <div class="rank-desc">科技博主 · 发布 87 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 65.2k
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position">5</div>
            <img src="https://picsum.photos/200/200?random=21" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">陈静</div>
              <div class="rank-desc">时尚博主 · 发布 156 篇内容</div>
            </div>
            <div class="rank-score">
              <i class="fa fa-heart"></i> 59.7k
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- 6. 成就排行榜 -->
  <div id="style6" class="rank-style">
    <div class="container">
      <div class="header">
        <button class="header-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">成就榜</h1>
        <button class="header-btn">
          <i class="fa fa-info-circle"></i>
        </button>
      </div>
      
      <div class="rank-tabs">
        <button class="rank-tab active">总成就</button>
        <button class="rank-tab">创作成就</button>
        <button class="rank-tab">互动成就</button>
        <button class="rank-tab">探索成就</button>
      </div>
      
      <div class="rank-content">
        <div class="rank-header">
          <h2 class="rank-title">社区成就排行</h2>
          <span class="rank-period">累计成就值</span>
        </div>
        
        <ul class="rank-list">
          <li class="rank-item">
            <div class="rank-position top-1">1</div>
            <img src="https://picsum.photos/200/200?random=22" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">张小明</div>
              <div class="rank-desc">解锁 38 项成就 · 大师级用户</div>
              <div class="rank-achievements">
                <div class="achievement-badge"><i class="fa fa-camera"></i></div>
                <div class="achievement-badge"><i class="fa fa-plane"></i></div>
                <div class="achievement-badge"><i class="fa fa-comment"></i></div>
                <div class="achievement-badge"><i class="fa fa-trophy"></i></div>
                <div class="achievement-badge" style="background-color: #f5f5f5; color: #999;">+34</div>
              </div>
            </div>
            <div class="rank-score">
              9850 点
              <div class="rank-level">Lv.42 探索者</div>
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position top-2">2</div>
            <img src="https://picsum.photos/200/200?random=23" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">李华</div>
              <div class="rank-desc">解锁 32 项成就 · 专家级用户</div>
              <div class="rank-achievements">
                <div class="achievement-badge"><i class="fa fa-cutlery"></i></div>
                <div class="achievement-badge"><i class="fa fa-pencil"></i></div>
                <div class="achievement-badge"><i class="fa fa-users"></i></div>
                <div class="achievement-badge"><i class="fa fa-star"></i></div>
                <div class="achievement-badge" style="background-color: #f5f5f5; color: #999;">+28</div>
              </div>
            </div>
            <div class="rank-score">
              8730 点
              <div class="rank-level">Lv.38 创作者</div>
            </div>
          </li>
          
          <li class="rank-item">
            <div class="rank-position top-3">3</div>
            <img src="https://picsum.photos/200/200?random=24" alt="用户头像" class="rank-avatar">
            <div class="rank-info">
              <div class="rank-name">王芳</div>
              <div class="rank-desc">解锁 29 项成就 · 专家级用户</div>
              <div class="rank-achievements">
                <div class="achievement-badge"><i class="fa fa-paint-brush"></i></div>
                <div class="achievement-badge"><i class="fa fa-image"></i></div>
                <div class="achievement-badge"><i class="fa fa-thumbs-up"></i></div>
                <div class="achievement-badge"><i class="fa fa-calendar-check-o"></i></div>
                <div class="achievement-badge" style="background-color: #f5f5f5; color: #999;">+25</div>
              </div>
            </div>
            <div class="rank-score">
              7690 点
              <div class="rank-level">Lv.35 艺术家</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 样式切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的样式页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.rank-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'block';
      });
    });
    
    // 排行榜标签切换功能
    document.querySelectorAll('.rank-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        // 只在当前样式页面内切换
        const styleContainer = this.closest('.rank-style');
        
        // 更新标签状态
        styleContainer.querySelectorAll('.rank-tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // 这里可以添加切换不同排行榜内容的逻辑
      });
    });
    
    // 初始化 - 隐藏所有样式，只显示默认样式
    document.querySelectorAll('.rank-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'block';
      }
    });
  </script>
</body>
</html>
